{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>码段添加页面</title>
  <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
</head>
<body>

<div class="layui-container">
	<div class="layui-row">
		<div class="layui-col-md4">
			<form class="layui-form" style="margin-top: 20px;">
				{% csrf_token %}
			  <div class="layui-form-item">
			    <label class="layui-form-label">类型名称</label>
			    <div class="layui-input-block">
			      <input type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			    </div>
			  </div>

<!--			  <div class="layui-form-item">-->
<!--				   <label class="layui-form-label">类型</label>-->
<!--			    <div class="layui-input-block">-->
<!--			      <select name="type" id='userid' lay-verify="required">-->
<!--			        <option value="" ></option>-->

<!--				  {% if TypeQueryset %}-->
<!--					  {% for item in TypeQueryset %}-->
<!--							<option value={{item.id}}>{{ item.title }}</option>-->
<!--						{% endfor %}-->
<!--				  {% endif %}-->
<!--			      </select>-->
<!--			    </div>-->
<!--			  </div>-->

				<div class="layui-form-item layui-form-text">
				 <label class="layui-form-label">备注</label>
				 <div class="layui-input-block">
				   <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
				 </div>
			   </div>

			  <div class="layui-form-item">
				<div class="layui-input-block">
				  <button type="submit" class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			  </div>
			</form>
		</div>
	</div>

</div>

<script src="{% static 'layui/layui.js' %}"></script>
<script>

layui.use(['form', 'jquery'],function(){
	const BaseUrl = "{{BaseUrl}}"
	// 获取 CSRF Token 的值
	// const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

	let form = layui.form;
	let $ = layui.jquery;
	let layer = layui.layer;

	// 监听提交事件
    form.on('submit(add)', function(data) {
        $.ajax({
            url: BaseUrl +'api/ny/code/type/',
            type: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            },
            data: data.field,
            success: function(result) {
				if(result.code===0){
						//关闭弹出层
					layer.msg('添加成功！', { icon: 1 ,time:2});
					let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
					parent.layer.close(index); // 再执行关闭
				}else{
						// 使用 Object.entries 获取键值对数组，并取出第一个键值对
						const [[firstKey, firstValue]] = Object.entries(result.msg);
						console.log(firstKey,firstValue);
						layer.msg(firstKey+':'+firstValue,{ icon: 2 })
					}
            },
            error: function(xhr, status, error) {
				console.error("添加失败:",xhr, status, error);
                layer.msg('添加失败！', { icon: 2 });
            }
        });
		return false; // 阻止表单默认提交
    });
})
</script>

</body>
</html>